<template>
	<div id="analysis">
		<div class="chart-item">
			<!-- 预约统计区域图 -->
			<div class="stackedBar">
				<v-chart :id="'stackedBar'" :data="option1" style="height: 380px;"></v-chart>
				<div v-show="noData1 == true" class="noData" >
					<img src="../assets/img/noData.png" alt="">
					<p>暂无数据</p>
				</div>
				<ul class="info">
					<li>预约总数：{{appoDataCount.appoTotal || 0}}</li>
					<li>赴约数：{{appoDataCount.keepCount || 0}}</li>
					<li>取消数：{{appoDataCount.cancelCount || 0}}</li>
					<li>爽约数：{{appoDataCount.breakCount || 0}}</li>
				</ul>
				<h2 class="chartName">预约统计</h2>
				<div class="selectArr">
					<el-select v-model="form1.years" placeholder="年" class="custom-select"  @change="changeYear1($event)">
						<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select clearable  v-model="form1.months" placeholder="月" class="custom-select"  @change="changeMonth1($event)">
						<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		<div class="chart-item">
			<!-- 业务预约统计 -->
			<div class="stackedLine">
				<h2 class="chartName">业务预约统计</h2>
				<v-chart :id="'stackedLine'" :data="option2" style="height: 380px;"></v-chart>
				<div v-show="noData2 == true" class="noData" >
					<img src="../assets/img/noData.png" alt="">
					<p>暂无数据</p>
				</div>
				<ul class="info">
					<li v-for="item in appointBusinessCount">{{item.bName}}:{{item.bTotal}}</li>
				</ul>
				<div class="selectArr">
					<el-select v-model="form2.years" placeholder="年" class="custom-select"  @change="changeYear2($event)">
						<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select clearable v-model="form2.months" placeholder="月" class="custom-select"  @change="changeMonth2($event)">
						<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		<div class="chart-item">
			<!-- 业务办理统计 -->
			<div class="stackedBar">
				<h2 class="chartName">业务办理统计</h2>
				<div v-show="noData3 == true" class="noData" >
					<img src="../assets/img/noData.png" alt="">
					<p>暂无数据</p>
				</div>
				<v-chart :id="'stackedBar2'" :data="option3" style="height: 380px;"></v-chart>
				<ul v-if="businessBanliCount !=null" class="info">
					<li>办理业务总数：{{businessBanliCount.bTotal}}</li>
					<li>预约办理业务：{{businessBanliCount.appoBTTotal}}</li>
					<li>非预约办理业务：{{businessBanliCount.offBTTotal}}</li>
				</ul>
				<ul v-else  class="info"></ul>
				<div class="selectArr">
					<el-select v-model="form3.years" placeholder="年" class="custom-select"  @change="changeYear3($event)">
						<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select clearable v-model="form3.months" placeholder="月" class="custom-select"  @change="changeMonth3($event)">
						<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select :disabled="disabled3" clearable v-model="form3.days" placeholder="日" class="custom-select"  @change="changeDays3($event)">
						<el-option v-for="(item,index) in days" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		
		<div class="chart-item" style="position: relative;">
			<div v-show="noData4 == true" class="noData" style="height: 400px;">
				<img src="../assets/img/noData.png" alt="">
				<p>暂无数据</p>
			</div>
			<div class="selectArr">
				<el-select v-model="form4.years" placeholder="年" class="custom-select"  @change="changeYear4($event)">
					<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<el-select clearable v-model="form4.months" placeholder="月" class="custom-select"  @change="changeMonth4($event)">
					<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<el-select clearable :disabled="disabled4" v-model="form4.days" placeholder="日" class="custom-select"  @change="changeDays4($event)">
					<el-option v-for="(item,index) in days" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="barChart">
				<v-chart :id="'barChart'" :data="option4" style="height: 350px;"></v-chart>
			</div>
			<div class="right">
				<div class="gaugeChart" style="position: relative;">
					<v-chart :id="'gaugeChart'" :data="option5" style="height: 235px;"></v-chart>
					<div class="tipsData">
						<div class="item">{{gCount}}</div>
						<div class="item">{{genCount}}</div>
						<div class="item">{{bCount}}</div>
					</div>
				</div>
				<div class="source">
					<h4>评价来源：</h4>
					<div class="progress">
						<div class="wxd" :style="{width: progress.wx + '%'}"></div>
						<div class="pjq" :style="{width: progress.pjq + '%'}"></div>
					</div>
					<div class="source-name">
						<span>微信端 {{progress.wx}}%</span>
						<span>评价器 {{progress.pjq}}%</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import vChart from "./view/chart.vue"
import {appoint,appointBusiness,businessProp,comment,years} from '../api/getData.js'
export default {
	name: '',
	components: {vChart},
	data() {
		return {
			option1: {
				tooltip : {
					trigger: 'axis',
					axisPointer : {          
						type : 'shadow'  
					}
				},
				legend: {
					data:['赴约次数','取消次数','爽约次数'],
					bottom:0,
					padding:[0,10],
					itemGap:30
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '8%',
					containLabel: true
				},
				color: ['#328EF9', '#F7AC60', '#d2d2d2'],
				yAxis : [
					{
						type : 'value',
						name:'预约（次数）',
						nameGap:30,
						axisLine:{
							show:false
						},
						axisTick:{
							show:false
						},
						splitLine:{
					　　 	lineStyle:{
								type:'dashed'
							}
					　　}
					}
				],
				xAxis : [
					{
						type : 'category',
						name:'时间',
						data : []
					}
				],
				series:[]
			},
			option2: {
				tooltip : {
					trigger: 'axis',
					axisPointer : {           
						type : 'line'   
					}
				},
				legend: {
					data:[],
					bottom:0,
					padding:[0,10],
					itemGap:30
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '8%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						name:'时间',
						boundaryGap:false,
						data : []//时间轴
					}
				],
				yAxis : [
					{
						type : 'value',
						name:'预约（次数）',
						nameGap:30,
						axisLine:{
							show:false
						},
						axisTick:{
							show:false
						},
						splitLine:{
					　　 	lineStyle:{
								type:'dashed'
							}
					　　}
					}
				],
				color: ['#565ADE','#328EF9','#3ED0B9','#9C6DE2','#FBB730','#FB8830'],
				series : []//显示数据，格式为数组json {name:'',type:'',data:[]
			},
			option3: {
				tooltip : {
					trigger: 'axis',
					axisPointer : {           
						type : 'shadow'    
					},
					formatter: function(v){
						let temp = v[0].name
						v.filter(s => s.value).forEach(s => temp += `<br/>  ${s.marker} ${s.seriesName} ${s.value}`)
						return temp
					}
				},
				legend: {
					data:[],
					bottom:0,
					padding:[0,10],
					itemGap:30
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '8%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						name:'窗口',
						data : []//窗口
					}
				],
				yAxis : [
					{
						type : 'value',
						name:'业务办理（次数）',
						nameGap:30,
						axisLine:{
							show:false
						},
						axisTick:{
							show:false
						},
						splitLine:{
					　　 	lineStyle:{
								type:'dashed'
							}
					　　}
					}
				],
				color: ['#565ADE','#328EF9','#3ED0B9','#9C6DE2','#FBB730','#FB8830'],
				series : []
			},
			option4: {
				title: {
					text: '用户统计评价'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					show: true,
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					position: 'top',
				},
				yAxis: {
					show: true,
					type: 'category',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					data: []
				},
				color: ["#0088FE", '#F9CB76', '#F65B59'],
				series: []
			},
			option5: {
				tooltip: {
					formatter: "满意度 <br/>{b}:{c}"
				},
				series: [{
						name: '非常满意',
						type: 'gauge',
						center: ['20%', '50%'],
						radius: '60%',
						axisLine: {
							lineStyle: {
								width:14,
							}
						},
						axisTick: {
							length: 12,
							lineStyle: {
								color: 'auto'
							}
						},
						splitLine: {
							length: 10,
							lineStyle: {
								color: 'auto'
							}
						},
						pointer: {
							width: 5
						},
						title: {
							offsetCenter: [0, '70%'],
						},
						itemStyle:{
							color:'#09ceb0'
						},
						axisLine: {
							lineStyle: {
								width:14,
								color: [[0.5,'#f7b869'],[1, '#EEE']]
							},
						},
						axisLabel: {
							show: false
						},
						detail: {
							show: false,
							color: "#333",
							fontSize: '24',
							offsetCenter:[0,'120%'],
							// detail: {formatter:'{value}%'}
						},
						data: []
					},
					{
						name: '一般',
						type: 'gauge',
						center: ['50%', '50%'],
						radius: '60%',
						axisTick: {
							length:0
						},
						splitLine: {
							length: 10,
							lineStyle: {
								color: 'auto',
							}
						},
						axisLabel: {
							show: false
						},
						pointer: {
							width: 5
						},
						title: {
							offsetCenter: [0, '70%'],
						},
						itemStyle:{
							color:'#f7b869'
						},
						axisLine: {
							lineStyle: {
								width:14,
								color: [[0,'#f7b869'],[1, '#EEE']]
							},
						},
						detail: {
							show: false,
							color: "#333",
							fontSize: '24',
							offsetCenter:[0,'120%'],
							// detail: {formatter:'{value}%'}
						},
						data: []
					},
					{
						name: '不满意',
						type: 'gauge',
						radius: '60%',
						center: ['80%', '50%'],
						axisTick: {
							length: 10,
							lineStyle: {
								color: 'auto'
							}
						},
						splitLine: {
							length: 10,
							lineStyle: {
								color: 'auto'
							}
						},
						pointer: {
							width: 5,
						},
						itemStyle:{
							color:'#f6605f'
						},
						axisLine: {
							lineStyle: {
								width:14,
								color: [[0, '#f7b869'],[1, '#EEE']]
							},
						},
						title: {
							offsetCenter: [0, '70%'],
						},
						axisLabel: {
							show: false
						},
						detail: {
							show: false,
							color: "#333",
							fontSize: '24',
							offsetCenter:[0,'120%']
						},
						data: []
					},
				]
			},
			form1:{
				years: new Date().getFullYear(),
				months:''
			},
			form2:{
				years: new Date().getFullYear(),
				months:'',
			},
			form3:{
				years: new Date().getFullYear(),
				months:'',
				days:'',
			},
			form4:{
				years: new Date().getFullYear(),
				months:'',
				days:'',
			},
			years:[],
			months:[],
			days:[],
			latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
			appoDataCount:{},//预约统计-总数-赴约数-取消数-爽约数
			appointBusinessCount:{},//业务预约统计次数
			businessBanliCount:null || {},//业务办理统计
			progress:{
				wx:'',
				pjq:''
			},
			disabled3:true,
			disabled4:true,
			gCount:0,
			genCount:0,
			bCount:0,
			noData1:true,
			noData2:true,
			noData3:true,
			noData4:true
		}
	},
	computed: {},
	watch:{},
	created() {
		
		this.appoint(this.form1.years)
		this.appointBusiness(this.form2.years)
		this.businessProp(this.form3.years)
		this.comment(this.form4.years)
	}, // 创建时
	beforeMount: function() {}, // 挂载之前
	mounted() {
		this.getTimeJson()
	}, // 挂载之后
	beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
	updated: function() {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function() {}, // 实例销毁后调用
	methods: {
		changeYear1(val){
			this.form1.years = val
			this.appoint(this.form1.years)
		},
		changeMonth1(val){
			console.log(this.form1.years + '-' + val,'年月')
			console.log(typeof this.form1.years,typeof  Number(val),Number(val))
			if(Number(val) == 0){
				this.appoint(this.form1.years)
			}else{
				this.appoint(this.form1.years + '-' + val)
			}
		},
		changeYear2(val){
			this.form2.years = val
			this.appointBusiness(this.form2.years)
		},
		changeMonth2(val){
			// console.log(val,'月')
			this.form2.months = val
			if(Number(val) == 0){
				this.appointBusiness(this.form2.years)
			}else{
				this.appointBusiness(this.form2.years + '-' + val)
			}
		},
		changeYear3(val){
			this.form3.years = val
			this.businessProp(this.form3.years)
		},
		changeMonth3(val){
			this.form3.months = val
			if(Number(val) == 0){
				this.form3.days = ''
				this.disabled3 = true
				this.businessProp(this.form3.years)
			}else{
				this.getTime(this.form3.years + '-' + this.form3.months)
				this.disabled3 = false
				this.businessProp(this.form3.years + '-' + this.form3.months)
			}
		},
		changeDays3(val){
			this.form3.days = val
			if(Number(val) == 0){
				this.businessProp(this.form3.years + '-' + this.form3.months)
			}else{
				this.businessProp(this.form3.years + '-' + this.form3.months + '-' + val)
			}
		},
		changeYear4(val){
			this.form4.years = val
			this.comment(this.form4.years)
		},
		changeMonth4(val){
			this.form4.months = val
			if(Number(val) == 0){
				this.form4.days = ''
				this.disabled4 = true
				this.comment(this.form4.years)
			}else{
				this.getTime(this.form4.years + '-' + this.form4.months)
				this.disabled4 = false
				this.comment(this.form4.years+ '-' + val)
			}
		},
		changeDays4(val){
			this.form4.days = val
			if(Number(val) == 0){
				this.comment(this.form4.years + '-' + this.form4.months)
			}else{
				this.comment(this.form4.years + '-' + this.form4.months + '-' + val)
			}
		},
		getTime(yearMonth){
			years({
				appoDate:yearMonth
			}).then((res)=>{
				console.log(res,"日期")
				if(res.data.code == 0){
					this.days = res.data.data
				}else{
					this.$message.error(res.data.msg)
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		getTimeJson(){
			var date=new Date();//创建日期对象
			var year=date.getFullYear();//获取当前年份
			for(var i=2018;i<=year;i++){//在id为year的selector附加option选项
					this.years.push(i)
			}
			for(var j=1;j<=12;j++){
				if(j<10){
					j= '0'+ j
				}
				this.months.push(j)
			}
		},
		
		// 预约统计
		appoint(time){
			appoint({
				appoDate:time,
				latticeId:this.latticeId,
			}).then((res) =>{
				console.log(res.data,"-----预约统计-----")
				if(res.data.code === 0){
					this.noData1 = false
					if(res.data.data.dataCount != null){
						this.appoDataCount = res.data.data.dataCount
					}else{
						this.appoDataCount = {}
					}
					let appoDate = []
					let keepArr = []
					let cancelArr = []
					let breakArr = []
					res.data.data.dataList.forEach((item,index)=>{
						// console.log(item,index)
						appoDate.push(item.appoDate)
						keepArr.push(item.keepCount)
						cancelArr.push(item.cancelCount)
						breakArr.push(item.breakCount)
					})
					// console.log(appoDate.length)
					if(appoDate.length == 12){
						appoDate = appoDate.map(v=>{
							// console.log(v,v.charAt(5))
							if(v){
								if(v.charAt(5) == 0){
									v= v.substring(6) + '月'
								}else{
									v= v.substring(5) + '月'
								}
								return v
							}
						})
					}else{
						appoDate = appoDate.map(v=>{
							// console.log(v)
							if(v){
								if(v.charAt(8) == 0){
									v= v.substring(9) + '日'
								}else{
									v= v.substring(8) + '日'
								}
								return v
							}
						})
					}
					this.option1 = {
						xAxis : [{type : 'category',name:'时间',data : appoDate}],
						series:[
							{name:'赴约次数',type:'bar',barWidth : 30,stack: '预约统计',data:keepArr},
							{name:'取消次数',type:'bar',barWidth : 30,stack: '预约统计',data:cancelArr},
							{name:'爽约次数',type:'bar',barWidth : 30,stack: '预约统计',data:breakArr}
						]
					}
				}else{
					this.noData1 = true
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 业务预约统计
		appointBusiness(time){
			appointBusiness({
				appoDate:time,latticeId:this.latticeId,
			}).then((res) =>{
				console.log(res.data,"------业务预约统计-----")	
				if(res.data.code == 0){
					this.noData2 = false
					let businArr=res.data.data.businessTypeList
					let timeArr = [];//时间段数组
					var seriesArr=[];//Y轴数据
					businArr.forEach((item,index)=>{
						let obj={
							name:item,
							type:'line',
							data:[]
						}
						seriesArr.push(obj)
					})
					res.data.data.dataList.forEach(v =>{
						timeArr.push(v.data)
						v.date.map(s=>{
							for(var i=0;i<seriesArr.length;i++){
								var j=seriesArr[i];
								if(j.name==s.bName){
									j.data.push(s.bTotal)
									break;
								}
							}
						})
					})
					if(timeArr.length == 12){
						timeArr = timeArr.map(v=>{
							// console.log(v,v.charAt(5))
							if(v){
								if(v.charAt(5) == 0){
									v= v.substring(6) + '月'
								}else{
									v= v.substring(5) + '月'
								}
								return v
							}
						})
					}else{
						timeArr = timeArr.map(v=>{
							// console.log(v)
							if(v){
								if(v.charAt(8) == 0){
									v= v.substring(9) + '日'
								}else{
									v= v.substring(8) + '日'
								}
								return v
							}
						})
					}
					this.appointBusinessCount = res.data.data.dataCount
					this.option2.xAxis = [{data : timeArr}],
					this.option2.legend.data = res.data.data.businessTypeList
					this.option2.series = seriesArr
				}else{
					this.noData2 = true
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 业务办理统计
		businessProp(time){
			businessProp({
				appoDate:time,latticeId:this.latticeId,
			}).then((res) =>{
				console.log(res.data,"----业务办理统计-----")
				if(res.data.code == 0){
					this.noData3 = false
					if(res.data.data.bHCount == null){
						this.businessBanliCount = null
					}else{
						this.businessBanliCount = res.data.data.bHCount
					}
					let businArr = res.data.data.businessTypeList
					let windowName = []
					var seriesArr=[];//Y轴数据
					businArr.forEach((item,index)=>{
						let obj={
							name:item,
							type:'bar',
							barWidth : 40,
							stack: '预约统计',
							data:[]
						}
						seriesArr.push(obj)
					})
					res.data.data.bHList.forEach(v=>{
						windowName.push(v.windowName)
						// console.log(v,'业务办理统计')
						v.businData.map(s=>{
							for(var i=0;i<seriesArr.length;i++){
								var j=seriesArr[i];
								if(j.name==s.bName){
									j.data.push(s.bTotal)
									break;
								}
							}
						})
					})
					this.option3.legend.data = res.data.data.businessTypeList
					this.option3.xAxis = [{data: windowName}]
					this.option3.series = seriesArr
				}else{
					this.noData3 = true
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 用户评价统计
		comment(time){
			comment({
				appoDate:time,latticeId:this.latticeId,
			}).then((res) =>{
				console.log(res.data,"-----用户评价统计-----")
				if(res.data.code == 0){
					this.noData4 = false
					let windowName = []
					let hArr = []
					let yArr =[]
					let bArr = []
					let eData = res.data.data.bHList.forEach(v =>{
						windowName.push(v.wName)
						hArr.push(v.offGAndGCount)
						yArr.push(v.offGAndGenCount)
						bArr.push(v.offBAndBCount)
					})
					this.option4.yAxis.data = windowName
					this.option4.series = [
						{name: '非常满意',type: 'bar',stack: '总量',barWidth: 10,data: hArr},
						{name: '一般',type: 'bar',barWidth: 10,stack: '总量',data: yArr},
						{name: '不满意',type: 'bar',stack: '总量',barWidth: 10,data: bArr},
					]
					if(res.data.data.bHCount != null){
						this.gCount = res.data.data.bHCount.allGCount
						this.genCount = res.data.data.bHCount.allGenCount
						this.bCount = res.data.data.bHCount.allBCount
						this.progress.wx = res.data.data.bHCount.onlineEvaluationSource
						this.progress.pjq = res.data.data.bHCount.offlineEvaluationSource
					}else{
						this.gCount = 0
						this.genCount = 0
						this.bCount = 0
						this.progress.wx = 0
						this.progress.pjq = 0
					}
					this.option5.series =[
						{	name: '非常满意',
							axisLine: {lineStyle: {width:14,color: [[res.data.data.bHCount.gCountPercentage/100  || 0, '#09ceb0'],[1, '#EEE']]}},
							data:[{value:res.data.data.bHCount.gCountPercentage  || 0,name: '非常满意'}],
						},
						{	name: '一般',
							axisLine: {lineStyle: {width:14,color: [[res.data.data.bHCount.genCountPercentage/100  || 0 , '#f7b869'],[1, '#EEE']]}},
							data:[{value: res.data.data.bHCount.genCountPercentage  || 0,name: '一般'}],
						},
						{	name: '不满意',
							axisLine: {lineStyle: {width:14,color: [[res.data.data.bHCount.bCountPercentage/100 || 0 , '#f6605f'],[1, '#EEE']]}},
							data:[{value:res.data.data.bHCount.bCountPercentage,name: '不满意'}],
						}
					]
				}else{
					this.noData4 = true
				}
			}).catch((error) =>{
				console.log(error)
			})
		}
	} 
}
</script>
<style lang='scss'>
	#analysis {
		.noData{
			position: absolute;
			width: 100%;
			height: 380px;
			left: 0;
			top:40px;
			background: #fff;
			z-index: 999;
			padding: 80px 0;
			text-align: center;
			p{
				font-size: 16px;
				margin-top: 20px;
			}
		}
		.chart-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24px;
		}
		.selectArr{
			position: absolute;
			right: 60px;
			top: 12px;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.custom-select {
			width: 96px;
			height: 32px;
			margin-left: 10px;
			.el-input__inner {
				height: 32px;
				line-height: 32px;
			}
			.el-input__icon {
				line-height: 32px;
			}
		}
		
		.stackedBar,.stackedLine{
			width: 100%;
			height: 450px;
			background: #fff;
			position: relative;
			padding: 40px 20px;
			.chartName{
				position: absolute;
				font-weight: bold;
				font-size: 18px;
				left:28px;
				top: 20px;
			}
			.info{
				position: absolute;
				display: flex;
				align-items: center;
				top: 60px;
				right: 60px;
				font-size: 14px;
				color: #333;
				font-family: "Microsoft YaHei";
				li{
					margin-right: 10px;
				}
			}
		}
		
		.nestedChart {
			width: 60%;
			height: 368px;
			background: #fff;
			position: relative;
			padding: 16px;
		}

		.funnelChart,
		.annulusChart {
			width: 38%;
			height: 368px;
			background: #fff;
			padding: 16px 24px;
			position: relative;
		}

		.nestedChart {
			display: flex;
			align-items: center;
		}
		.s-item{
			em{
				display: inline-block;
				width:10px;
				height:10px;
				border-radius: 50%;
				background: #048AFE;
			}
			strong{
				border-right: 1px solid #ccc;
				padding: 0 8px;
			}
			span{
				padding-left:8px;
			}
		}
		.s-lists{
			padding: 8px 0 8px 32px;
			li{
				line-height: 1.6;
				span:nth-child(1){
					padding: 0 8px;
					border-right: 1px solid #ccc;
				}
				span:nth-child(2){
					padding: 0 8px;
				}
			}
		}
		.barChart,
		.right {
			width: 50%;
			height: 460px;
			padding: 16px 24px;
			background: #fff;
			.tipsData{
				padding: 0 5%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 190px;
				.item{
					width:33%;
					flex: 1;
					font-size: 24px;
					color: #000;
					text-align: center;
				}
			}
			.source {
				/* margin-top: 40px; */
				h4 {
					color: #000;
				}
				.progress {
					width: 100%;
					height: 20px;
					background: #eee;
					display: flex;
					margin-top: 20px;
					font-size: 12px;
					.wxd {
						height: 20px;
						background: #363A3E;
					}
					.pjq {
						text-align: right;
						height: 20px;
						background: #E2AC52;
					}
				}
				.source-name{
					margin-top: 10px;
					display: flex;
					width:100%;
					align-items: center;
					justify-content: space-between;
					font-size: 12px;
				}
			}
		}

	}
</style>
